<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title ref="title"></title>
  <script src="bower_components/vue/dist/vue2.5.js"></script>
  <script src="kuromoji/build/kuromoji.js"></script>
</head>

<body>
  <div id="app">
    <div class="container" v-if="isLoaded">
      <h1>{{ lyricData.songName }}</h1>
      <div class="btn-group">
        <button @click="jpBtnClick()" :class="{ 'btn-off': !btnData.showKana}">假名</button>
        <button @click="zhBtnClick()" :class="{ 'btn-off': !btnData.showChinese }">中文</button>
      </div>
      <!-- 歌词容器 -->
      <div class="lyric-container">
        <!-- 歌词行容器 -->
        <div class="lyrics-line" v-for="(lyric, idx) in lyricList" :key="idx">
          <div class="lyric-jp" v-html="lyric.lyricJP"></div>
          <div class="lyric-zh" v-if="btnData.showChinese">{{ lyric.lyricZH }}</div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/lyric.js"></script>

  <style id="css">
    .container {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 20px;
      font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
    }

    /* 歌词行容器 */
    .lyrics-line {
      padding: 10px;
      margin-bottom: 10px;
    }

    .lyrics-line:hover,
    .lyrics-line:hover .ruby {
      background-color: aliceblue;
      color: blue;
      border-radius: 16px;
      transform: scale(1.1);
      transition: all 0.1s;
      font-weight: 500;
    }

    .lyric-jp {
      letter-spacing: 0.1em;
    }

    .rt {
      font-size: 10px;
    }

    .lyric-container {
      overflow: hidden;
    }

    /* 按钮组 */
    .btn-group>button {
      margin: 5px 5px;
    }

    /** 按钮off样式 */
    .btn-off {
      background-color: #c4c4c4;
      text-decoration: line-through;
    }
  </style>

</body>

</html>